/* 
0 建议先把接口的根地址 改为 线上的地址  
  https://api-haoke-web.itheima.net
1 初始化地图 
  1 全局变量 需要加window
  2 地图的div 需要加高度 
2 数据显示
  1 地图显示我的所在地 
    1 从redux中获取当前城市
    2  map.centerAndZoom(this.props.cityName);

  2 地图上显示 所在地的 房源信息 
    1 发送请求 获取对应 房源数据 json 数组
      1 当前城市名称 发送给后台 返回 对应 id value
      2 将城市的id 发送给后台 后台 返回 当前城市的下的区的房源数据 
    2 使用百度地图的api 来 描绘房源效果 

3 学习一些百度地图的api
  1 根据经纬度 地图上画 圆圈  

4 点击 覆盖物
  1 第一次点击 覆盖物 
    0 label标签如何绑定点击事件 百度地图  addEventListener
    1 加载被点击的覆盖物下的房源数据  调用我们自己的接口 可以实现 
    2 放大 和 定位  地图  百度地图的api centerAndZoom
    3 清除旧的覆盖物  百度地图的api   map.clearOverlays()
  2 如何合理的组装一些代码
    1 封装公共的部分 抽离不同的部分(参数)  做法绝对不唯一 
    2 公共的部分
      1 发送请求 获取数据
      2 循环数据 
      3 绑定点击事件
      4 点击事件中 做上述一些 4.1 功能
    3 不同 
      1 被点击的元素的id value 
      2 定位的坐标点 
5 分析不同的显示地图次数 表现
  1 第一次显示地图
    1 覆盖物 圆圈 
    2 放大的倍数 12 
  2 第二显示地图
    1 覆盖物 圆圈 
    2 放大的倍数 13
  3 第三次 显示地图
    1 覆盖物 矩形
    2 放大倍数 14 
    3 再次点击
      1 触发另外的业务 

 */
import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';

import { connect } from "react-redux";

import indexCss from "./index.module.scss";

import { request as axios } from "../../utils/request";

const BMap = window.BMap;

let map = null;


class Index extends Component {

  // 全局变量  没有把它放在state中  微信小程序中讲解 data 
  ZoomList = [
    {
      cls: "circle",
      zoom: 12
    },
    {
      cls: "circle",
      zoom: 13
    },
    {
      cls: "rect",
      zoom: 16
    },
  ]
  // 地图显示的次数
  mapIndex = -1;
  state = {
    showHouse: false
  }

  // state 也是全局变量 里面值都需要在视图中直接使用
  async componentDidMount() {
    map = new BMap.Map("container");
    map.addEventListener("dragstart",()=>{
      console.log("开始拖拽");
    })
    // 添加平移缩放组件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    // 1 获取城市的id  把广州市发送获取 返回 广州  对应 id 
    const res1 = await axios.get("/area/info", { params: { name: this.props.cityName } });
    const id = res1.data.body.value;
    this.loadOverLays(id, this.props.cityName);
  }


  // 加载地图的覆盖
  // id 区域的 
  // currentPoint 要定位的点坐标
  loadOverLays = async (id, currentPoint) => {

    this.mapIndex++;

    //  居中和缩放
    map.centerAndZoom(currentPoint, this.ZoomList[this.mapIndex].zoom);
    // 把id发送过去 获取id对应的一堆房源数据
    const res2 = await axios.get("/area/map", { params: { id } });
    // 对房源进行了循环
    res2.data.body.forEach(area => {
      // coord: {latitude: "23.17599", longitude: "113.261927"}
      // count: 375
      // label: "白云"
      // value: "AREA|8b5511b3-7699-f921"

      // 根据 区域所在的经纬度来创建一个point
      const point = new BMap.Point(area.coord.longitude, area.coord.latitude);
      const opts = { position: point };
      // this.ZoomList[this.mapIndex].cls =  "circle" "rect"
      const clsName = indexCss[this.ZoomList[this.mapIndex].cls];
      const label = new BMap.Label(`<div class='${indexCss.area_label} ${clsName} ' ><span> ${area.label}</span> <span> ${area.count}</span> </div>`, opts);  // 创建文本标注对象
      label.setStyle({
        border: "none",
        backgroundColor: "transparent"
      });
      // 给label绑定了点击事件
      label.addEventListener("click", () => {

        if (this.mapIndex === 2) {
          // 触发另外的业务
          console.log("触发另外的业务");
          this.getHouse(area.value);
        } else {


          // 清除覆盖物
          setTimeout(() => {
            map.clearOverlays();
            // 根据被点击的区域  获取它对应的 id  
            // this.loadOverLays("被点击的区域的id","被点击的区域的坐标");
            this.loadOverLays(area.value, point);
          }, 0);
        }

      })
      map.addOverlay(label);
    })
  }

  // 根据地区id 来加载房源详情列表 有图片和文字描述
  getHouse=async (id)=>{
    const res=await axios.get("/houses",{params:{cityId:id}});
    console.log(res);
    
  }

  render() {
    return (
      <div>
        <NavBar
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={this.props.history.goBack}
        > 地图找房</NavBar>

        {/* 地图 */ }
    <div className={indexCss.map_container}>
      <div id="container" className={indexCss.map_box} ></div>
      {/* 房屋列表 */}
      {this.state.showHouse && <div className={indexCss.house_list}>12534</div>}
    </div>
      </div >
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.cityReducer.cityName
})

const mapDispatchToProps = {

}



export default connect(mapStateToProps, mapDispatchToProps)(Index);